<template>
  <el-dialog
    append-to-body
    v-if="visible"
    :title="title"
    :width="width"
    :top="top + 'vh'"
    :modal="showModal"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="close"
  >
    <div class="wp-body__box" :style="{ height: height + 'px' }">
      <el-form ref="dataForm" :model="product" label-width="120px" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="productName">
              <el-input
                v-model.trim="product.productName"
                class="wp-form-280"
                placeholder="产品名称"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品类型" prop="productType">
              <el-select
                v-model.trim="product.productType"
                class="wp-form-280"
                placeholder="产品类型"
                clearable
              >
                <el-option-group>
                  <el-option
                    v-for="item in productTypes"
                    :label="item.bizName"
                    :value="item.bizValue"
                    :key="item.bizValue"
                  ></el-option>
                </el-option-group>
                <el-option-group>
                  <div class="wp-select-opt">
                  <el-button type="primary" size="mini" round @click="dialogTypeVisible=true" icon="wp wp-icon-save">
                    新增产品类型
                  </el-button>
                  </div>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品型号" prop="productModel">
              <el-input
                v-model.trim="product.productModel"
                class="wp-form-280"
                placeholder="产品型号"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品单位" prop="unit">
              <el-select
                v-model.trim="product.unit"
                class="wp-form-280"
                placeholder="产品单位"
                clearable
              >
                <el-option
                  v-for="item in productUnits"
                  :label="item"
                  :value="item"
                  :key="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="价格（MSRP）" prop="salesPrice">
              <el-input
                v-model.trim="product.salesPrice"
                class="wp-form-280"
                placeholder="建议销售价格"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否上下架" prop="status">
              <el-select
                v-model.trim="product.status"
                class="wp-form-280"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in statusOptions"
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品描述">
              <el-input
                type="textarea"
                v-model.trim="product.remark"
                class="wp-form-280"
                placeholder="产品描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品图片">
              <Multi-image ref="uploadImage" :limit='2' :files="files"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer" class="wp-footer__box">
      <el-button @click.native="close">取消</el-button>
      <el-button @click="addAdditional" v-if="false">添加产品附加信息</el-button>
      <el-button type="success" @click.native="save('dataForm')">保存</el-button>
    </div>
    <detail-dialog title="新增产品类型" width="40" modal :show.sync="dialogTypeVisible" @save="addProductType()">
      <el-form v-if="dialogTypeVisible" :model="productTypeData" label-width="120px" ref="productTypeForm">
        <el-form-item label="产品类型" prop="productType" :rules="{required: true, message: '不能为空', trigger: 'blur'}">
          <el-input v-model="productTypeData.productType" class="wp-form-280" clearable></el-input>
        </el-form-item>
      </el-form>
    </detail-dialog>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import store from '@/store'
import MultiImage from '@/components/Upload/MultiImage'
import DetailDialog from '@/components/DetailDialog'
import system from '@/api/system'

export default {
  components: {MultiImage, DetailDialog},
  props: {
    height: {
      type: Number,
      default: 360
    },
    top: {type: [Number], default: 2},
    width: {type: [String, Number], default: '80%'},
    showModal: {type: Boolean, default: true}
  },
  computed: {
    ...mapGetters([
      'productTypes',
      'productUnits'
    ])
  },
  data () {
    return {
      visible: false,
      product: {},
      files: [],
      title: '',
      dialogTypeVisible: false,
      productTypeData: {},
      statusOptions: [{value: 1, label: '上架'}, {value: 0, label: '下架'}],
      rules: {
        productName: [{required: true, message: '不能为空', trigger: 'blur'}],
        productType: [{required: true, message: '不能为空', trigger: 'blur'}],
        productModel: [{required: true, message: '不能为空', trigger: 'blur'}],
        status: [{required: true, message: '不能为空', trigger: 'blur'}]
      }
    }
  },
  methods: {
    show (title, data) {
      if (title) {
        this.title = title
      }
      if (data) {
        this.product = data
        if (data.productAdditionalInfoList) {
          const productAdditionalInfoList = data.productAdditionalInfoList
          this.files = productAdditionalInfoList.filter((item) => {
            return item.additionalCode === 'ProductImage'
          }).map((item) => {
            const index1 = item.additionalDetailValue.lastIndexOf('/') + 1
            const name = item.additionalDetailValue.substring(index1)
            return {name, url: item.additionalDetailValue}
          })
        }
      } else {
        this.product = {}
        this.files = []
      }
      this.visible = true
    },
    close () {
      this.visible = false
    },
    save (formName) {
      if (!this.checkFormData(formName)) {
        return
      }
      const fileList = this.$refs.uploadImage.fileList || []
      if (fileList && fileList.length > 0) {
        this.product.showPic = fileList[0].url
        let productAdditionalInfoList = fileList.map((item, index) => {
          return {'additionalDetailValue': item.url}
        })
        this.product.productAdditionalInfoList = productAdditionalInfoList
      }
      this.$emit('save', this.product)
    },
    checkFormData (formName) {
      let f = false
      this.$refs[formName].validate(valid => {
        f = valid
      })
      return f
    },
    addProductType () {
      if (this.checkFormData('productTypeForm')) {
        const params = {'bizTypeName': '产品类型', 'bizType': 'productType', 'bizName': this.productTypeData.productType, status: 1, isEdit: 0}
        system.addDictAPI(params).then(res => {
          if (res.code === 0) {
            store.dispatch('common/GetProductType')
            this.dialogTypeVisible = false
          }
        })
      }
    },
    addAdditional () {
    }

  }
}
</script>

<style lang="scss" scoped>
  .wp-body__box {
    position: relative;
    overflow: auto;
    padding: 10px;

    .wp-item-value {
      width: 280px;
    }
  }

  .wp-footer__box {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .wp-select-opt {
    padding-left: 20px;
  }
</style>
